<template>
  <div>
    <el-container id="auth-container">
      <el-main style="position: relative;">
        <div id="login-box">
          <div class="header">
            {{ this.website_chinese_title }}
            <p>{{ this.website_english_title }}</p>
          </div>
          <div class="main" style="width: 100%;">
            <el-form ref="form" :model="dataForm" :rules="dataRule">
              <el-form-item prop="username">
                <el-input v-model="dataForm.username" :placeholder="$t('login.username')" class="cuborder-radius"/>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')" class="cuborder-radius"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login" class="submit-btn">
                  {{ $t('common.login') }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="copyright" v-html="this.copyright"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        dataForm:
        {
          username: '',
          password: ''
        },
        dataRule:
        {
          username: [
            { required: true, message: this.$t('login.rules.username.require'), trigger: 'blur' },
          ],
          password: [
            { required: true, message: this.$t('login.rules.password.require'), trigger: 'blur' },
          ],
        }
      };
    },
    methods: {
      get_system_info:function() {
        this.$http({
          url: this.$http.adornUrl(`/kernel`),
          method: 'post',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.status === 200) {
            localStorage.setItem('web_info', JSON.stringify(data.data));

            this.website_logo          = data.data.logo
            this.website_chinese_title = data.data.web_chinese_name
            this.website_english_title = data.data.web_english_name
            this.website_short_title   = data.data.web_short_name
            this.website_basic_title   = data.data.web_basic_name
            this.website_description   = data.data.description
            this.copyright             = data.data.copyright
          }
        })
      },
      // 登录
      login: function() {
        var _this = this;

        this.$http({
          url: '/api/login',
          method: 'post',
          data: this.$http.adornData({
            'username': this.dataForm.username,
            'password': this.dataForm.password,
          })
        }).then(({data}) => {
          if (data && data.status === 200) {
            // 存储用户的token
            localStorage.setItem("token", data.data.token);
            localStorage.setItem('user_info',JSON.stringify(data.data.user_info));

            _this.$message({ message: _this.$t('login.login_success'), type: "success" });

            let is_new = data.data.user_info.is_new;
            let id = data.data.user_info.id;

            if(1 == is_new)
            {
              _this.$router.push({ name: "user_password_form", query: {id: id} });
            }
            else
            {
              _this.$router.push({ name: "home" });
            }
          }
          else {
            _this.$message.error(data.message);
            return;
          }
        })
      },
      check_user_login: function() {
        var _this = this;

        _this.$http({
          url: _this.$http.adornUrl(`/check_user_login`),
          method: 'get',
          params: _this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.status === 200) {
            _this.$router.push({ name: "home" });
          }
          else {
            _this.$router.push({ name: "login" });
          }
        })
      },
    },
    computed: {
      website_logo: {
        get () { return this.$store.state.system.website_logo },
        set (val) { this.$store.commit('system/updateWebsiteLogo', val) }
      },
      website_chinese_title: {
        get () { return this.$store.state.system.website_chinese_title },
        set (val) { this.$store.commit('system/updateWebsiteChineseTitle', val) }
      },
      website_english_title: {
        get () { return this.$store.state.system.website_english_title },
        set (val) { this.$store.commit('system/updateWebsiteEnglishTitle', val) }
      },
      website_short_title: {
        get () { return this.$store.state.system.website_short_title },
        set (val) { this.$store.commit('system/updateWebsiteShortTitle', val) }
      },
      website_basic_title: {
        get () { return this.$store.state.system.website_basic_title },
        set (val) { this.$store.commit('system/updateWebsiteBasicTitle', val) }
      },
      website_description: {
        get () { return this.$store.state.system.website_description },
        set (val) { this.$store.commit('system/updateWebsiteDescription', val) }
      },
      copyright: {
        get () { return this.$store.state.system.copyright },
        set (val) { this.$store.commit('system/updateCopyright', val) }
      }
    },
    created: function() {
      this.get_system_info();
      // this.check_user_login();
    }
  };
</script>

<style scoped>
  #auth-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #F6F8FB;
}

#logo-name {
  width: 200px;
  height: 38px;
  font-size: 30px;
  font-family: Times New Roman, Georgia, Serif;
  color: #2196f3;
  margin-left: 20px;
}

#login-box {
  position: absolute;
  width: 350px;
  min-height: 380px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 0 #ccc;
  box-shadow: 0 4px 14px 0 rgba(206, 207, 209, .5);
  padding: 10px 20px;
}

#login-box .header {
  width: 100%;
  height: 90px;
  font-size: 22px;
  margin: 25px 0 20px 0;
  text-align: center;
}
#login-box .header p {
  font-size: 14px;
  margin-top: 10px;
}

#login-box .submit-btn {
  width: 100%;
  height: 38px;
  border-radius: 2px;
}

.send-code-btn {
  width: 140px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  background: #f3ecec;
  text-align: center;
  color: #777373;
  cursor: pointer;
  user-select: none;
}

.send-code-btn:active {
  background: #e4dbdb;
}

.send-sms-disable {
  cursor: not-allowed !important;
  background: #f7f7f7 !important;
  color: silver !important;
}

.cuborder-radius>>>.el-input__inner {
  border-radius: 1px !important;
  height: 38px;
}

.links{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
}


.preview-account {
  text-align: center;
}

.preview-account p {
  height: 25px;
  line-height: 25px;
  color: rgb(45, 44, 44);
  font-weight: 100;
  font-size: 12px;
}

.copyright {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  width: 70%;
  text-align: center;
  margin: 0 auto;
  font-size: 12px;
  color: #b1a0a0;
}

.copyright a {
  color: #777272;
  font-weight: 400;
}

.login-broadside {
  padding: 0;
  background-image: url();
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

.login-broadside .describe {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  width: 80%;
  margin: 0 auto;
  color: rgba(230, 230, 230, 0.6);
  line-height: 23px;
  font-size: 14px;
}

@media screen and (max-height: 500px) {
  .copyright {
    display: none;
  }
}

@media screen and (max-width: 1000px) {
  .login-broadside {
    display: none;
  }
}

</style>
